<template>
	<view class="shop-box">
		<!-- 门店详情 -->
		<view class="shop-card">
			<view class="shop-name">
				<h2>{{listData.value.sname}}</h2>
			</view>
			<view class="plant1">
				<view class="shop-grade">
					<a>评分：{{listData.value.score}}</a>
				</view>
				<view class="shop-status">
					<a>已开业</a>
				</view>
			</view>
			<img class="shop-img" :src="listData.value.photo" alt="">
			<view class="shop-detail">
				<a>店铺描述:{{listData.value.sdesc}}</a>
			</view>
			<view class="shop-phone">
				<a>电话</a>
			</view>
			<view class="shop-address">
				<navigator url="/pages/index/map">地址:{{listData.value.address}}</navigator>
			</view>
		</view>
		<!-- 三个板块，跳转页面 -->
		<view class="button-box">
			<button class="btn" @click="openJiyang()">寄养</button>
			<button class="btn">服务</button>
			<button class="btn" @click="openPetsShop()">宠物用品</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		onLoad,onShow
	} from "@dcloudio/uni-app";
	import {
		reactive,
		ref
	} from "vue"
	// import ajax from "../../util/request"
	  
	let shopItem = reactive({
		info:{}
	})
	// 店铺详细信息
	onLoad(() => {
		uni.$on('update', (data)=>{
			uni.setStorage({
				key:'pet_data',
				data:data
			})
			console.log('listData=',data)
		})
		
	})
	const value = uni.getStorageSync("pet_data")
	console.log('value=',value)
	const listData = reactive({value})
	console.log('listData=',listData)
	function openJiyang() {
		//在起始页面跳转到pet-jiyang.vue页面并传递参数
		uni.navigateTo({
			url: "/pages/pets-somethings/pet-jiyang"
		});
	}

	function openPetsShop() {
		console.log('12345')
		//在起始页面跳转到pets-shop.vue页面并传递参数
		uni.navigateTo({
			url: "/pages/pets-somethings/pets-shop"
		});
	}
</script>

<style scoped>
	.shop-box {
		padding: 20rpx;
		background-color: rgb(255, 228, 245);
	}

	.shop-card {
		border: 1rpx solid #fff;
	}

	.shop-card>* {
		padding: 15rpx 20rpx;
		/* border: 1px solid red; */
	}

	.plant1 {
		display: flex;
		justify-content: space-between;
	}

	.shop-img {
		margin: 20rpx 30rpx;
		width: 200rpx;
		height: 150rpx;
	}

	.shop-address {
		border-top: 1rpx solid #fff;
	}

	.button-box {
		margin-top: 30rpx;
	}

	.btn {
		height: 150rpx;
		line-height: 150rpx;
		magrin-bottom: 30rpx;
	}
</style>
